<template>
    <div class="header" >
        <el-row :gutter="5" style="width: 100%;height: 100%">
            <el-col  :xs="6" :sm="3" :md="3" :lg="3" :xl="3">
                <div class="kzicon" align="left">
                    <img src="~../../assets/img/kongzi.png" >
                    <img src="~../../assets/img/zhongchuan.png" >
                </div>

            </el-col>


            <el-col :xs="8" :sm="8" :md="7" :lg="7" :xl="7">
                <div class="header-title" align="center">

                    孔子学院风险舆情应对口径库与案例库 一期

                </div>
            </el-col>

            <el-col :xs="7" :sm="5" :md="6" :lg="6" :xl="6">
                <div class="search">
                    <el-input placeholder="请输入关键词"

                              v-model="searchinput" clearable="false" size="medium">

                    </el-input>
                    <el-button type="primary" size="medium"  icon="el-icon-search" @click="search" round></el-button>

                </div>
            </el-col>

            <el-col :xs="3" :sm="8" :md="8" :lg="8" :xl="8" style="display: flex">
                <div class="header-tile">
                    <span>中国传媒大学国家传播创新研究中心</span>
                    <span>2019年3月</span>
                </div>
            </el-col>

        </el-row>

    </div>
</template>

<script>


    export default {
        name: "kheader",
        data(){
            return{
                searchinput:""
            }
        },
        mounted() {

        },
        methods:{
            search(){
                this.$bus.$emit('search',this.searchinput)
                this.$router.replace('/search/'+this.searchinput)

            }
        }
    }
</script>

<style scoped>
    .header{
        background-image: url("~../../assets/img/titlebc.jpg");

        background-repeat: repeat-y;
        background-size: 100%;

        color:#333;
        text-align: left;

        height: 8%;
        width: 100%;
        font-family: 微软雅黑;
        display: flex;


        /*justify-content: center;*/
    }

    .el-col{
        height:100%;
        position: relative;

    }

    .header-title{

        position: relative;
        overflow: hidden;
        height: 100%;
        display: flex;
        align-items: center;
        line-height: 1.5em;

    }



    .search{
        margin-left: 5%;
        position: relative;
        overflow: hidden;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .header-tile{
        margin-left: auto;
        margin-top:auto;

    }



    .header-tile span{
        display: block;
        line-height: 1.2;
        text-align: center;
        font-size:0.07rem;
    }

    .search{
        display: flex;
        margin-left: auto;
        margin-right: auto;
    }

    .kzicon{
        position: relative;
        overflow: hidden;
        height: 100%;
        display: flex;
        align-items: center;

    }
    .kzicon img{


        height:70%
    }


</style>